<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <!-- 地址栏显示 -->
    <link rel="Shortcut Icon" href="/images/hospital.png" type="image/x-icon"/>
    <!-- 收藏栏也显示 -->
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="Bookmark" href="/images/hospital.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<!-- 你的 HTML 代码 -->
<!--轮播--->
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div><img src="/images/img/1.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
        <div><img src="/images/img/2.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
        <div><img src="/images/img/3.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
        <div><img src="/images/img/4.jpg" style="width: 100%; height: 100%;object-fit: cover;"/></div>
    </div>
</div>

<!---手风琴-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>公告</legend>
</fieldset>
<div class="layui-collapse" lay-accordion=""></div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'layer', 'form','element'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var element=layui.element;


        var carousel = layui.carousel;
       //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '380'
            , arrow: 'always' //始终显示箭头
            , autoplay: true
            ,interval:3000
          //,anim: 'updown' //切换动画方式

        });
       //调用接口，将公告全部查出
        $.get('/api/announcement',function (res) {
           var html='';
           $.each(res.data,function (i,obj) {
               html += '<div class="layui-colla-item"><h2 class="layui-colla-title">'+obj.title+'<i class="layui-icon layui-colla-icon"> </i></h2> <div class="layui-colla-content  "><p>'+obj.contents+'</p></div></div>';
           });
           $('.layui-collapse').html(html);

           element.render();
        });
        element.on('collapse(test1)',function (data) {
            layer.msg('展开状态'+data.show)

        });

    });
</script>
</body>
</html>